<template>
  <div class="staff-container">
    <!-- 头部区域 -->
    <div class="header">
      <div class="header-left">
        <button class="back-button" @click="handleBack">
          <i class="iconfont icon-arrow-left"></i>
        </button>
        <h1 class="title">员工管理</h1>
      </div>
      <button class="add-btn" @click="showAddDialog">添加员工</button>
    </div>

    <!-- 左右表格布局 -->
    <div class="tables-wrapper">
      <!-- 左侧管理员表格 -->
      <div class="left-table">
        <h3>管理员列表</h3>
        <div class="search-bar">
          <input
            type="text"
            class="search-input"
            placeholder="搜索管理员"
            v-model="adminSearchQuery"
          />
        </div>
        <div class="table-container">
          <table class="data-table">
            <thead>
              <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>姓名</th>
                <th>职位</th>
                <th>权限</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="admin in filteredAdmins" :key="admin.id" @click="selectAdmin(admin)" :class="{ selected: selectedAdmin && selectedAdmin.id === admin.id }">
                <td>{{ admin.id }}</td>
                <td>{{ admin.username }}</td>
                <td>{{ admin.real_name }}</td>
                <td>{{ admin.position }}</td>
                <td>
                  <span class="permission-tag permission-admin">员工管理员</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 右侧员工表格 -->
      <div class="right-table">
        <h3>{{ selectedAdmin ? `${selectedAdmin.real_name} 的下属` : '员工列表' }}</h3>
        <div class="search-bar">
          <input
            type="text"
            class="search-input"
            placeholder="请输入用户名或姓名搜索"
            v-model="searchQuery"
          />
        </div>
        <div class="table-container">
          <table class="data-table">
            <thead>
              <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>姓名</th>
                <th>职位</th>
                <th>权限</th>
                <th>手机号</th>
                <th>电子邮箱</th>
                <th>性别</th>
                <th>底薪</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="staff in filteredStaff" :key="staff.id">
                <td>{{ staff.id }}</td>
                <td>{{ staff.username }}</td>
                <td>{{ staff.real_name }}</td>
                <td>{{ staff.position }}</td>
                <td>
                  <span class="permission-tag" :class="`permission-${staff.permission}`">
                    {{ formatPermission(staff.permission) }}
                  </span>
                </td>
                <td>{{ staff.sub_mobile || '-' }}</td>
                <td>{{ staff.email || '-' }}</td>
                <td>{{ formatGender(staff.gender) }}</td>
                <td>¥{{ staff.basic_salary || 0 }}</td>
                <td>
                  <span class="status active">启用</span>
                </td>
                <td>
                  <button 
                    class="edit-btn" 
                    @click="editStaff(staff)"
                    :disabled="staff.permission === 'superadmin'"
                  >编辑</button>
                  <button 
                    class="delete-btn" 
                    @click="confirmDelete(staff)"
                    :disabled="staff.permission === 'superadmin'"
                  >删除</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 添加/编辑员工对话框 -->
    <div v-if="showDialog" class="dialog-overlay" :class="{'active': overlayActive}">
      <!-- 云朵背景 -->
      <div class="cloud cloud-1"></div>
      <div class="cloud cloud-2"></div>
      <div class="cloud cloud-3"></div>
      
      <div class="dialog-content" :class="{'bounce-in': animate}">
        <div class="dialog-header">
          <div class="dialog-title">
            <h2>{{ isEditing ? '编辑员工' : '添加员工' }}</h2>
            <div class="title-underline"></div>
          </div>
          <button class="close-btn" @click="closeDialog">
            <i class="iconfont icon-close"></i>
          </button>
        </div>
        <div class="dialog-body">
          <form @submit.prevent="submitForm">
            <div class="form-group">
              <label>
                <i class="iconfont icon-user"></i>
                用户名
              </label>
              <input 
                v-model="formData.username" 
                type="text" 
                placeholder="请输入用户名"
                class="form-input"
                required
              >
            </div>
            <div class="form-group">
              <label>
                <i class="iconfont icon-edit"></i>
                姓名
              </label>
              <input 
                v-model="formData.real_name" 
                type="text" 
                placeholder="请输入姓名"
                class="form-input"
                required
              >
            </div>
            <div class="form-group">
              <label>
                <i class="iconfont icon-lock"></i>
                密码
              </label>
              <input 
                v-model="formData.password" 
                type="password" 
                placeholder="请输入密码，默认为123456"
                class="form-input"
              >
            </div>
            <div class="form-group">
              <label>
                <i class="iconfont icon-position"></i>
                职位
              </label>
              <select 
                v-model="formData.position" 
                class="form-input"
                required
              >
                <option value="">请选择职位</option>
                <option v-for="position in positionList" :key="position.value" :value="position.value === '' ? '无' : position.text">
                  {{ position.text }}
                </option>
              </select>
            </div>
            <div class="form-row">
              <div class="form-group">
              <label>
                <i class="iconfont icon-lock"></i>
                权限
              </label>
              <select 
                v-model="formData.permission" 
                class="form-input"
                required
                :disabled="isSubAccount"
              >
                <option value="member">普通员工</option>
                <option value="admin" :disabled="isSubAccount">员工管理员</option>
              </select>
            </div>
              <div class="form-group">
                <label>
                  <i class="iconfont icon-status"></i>
                  状态
                </label>
                <select 
                  v-model="formData.status" 
                  class="form-input"
                  required
                >
                  <option :value="1">启用</option>
                  <option :value="0">禁用</option>
                </select>
              </div>
            </div>
            <!-- 新增字段 -->
            <div class="form-row">
              <div class="form-group">
                <label>
                  <i class="iconfont icon-mobile"></i>
                  手机号
                </label>
                <input 
                  v-model="formData.sub_mobile" 
                  type="tel" 
                  placeholder="请输入手机号（选填）"
                  class="form-input"
                >
              </div>
              <div class="form-group">
                <label>
                  <i class="iconfont icon-email"></i>
                  电子邮箱
                </label>
                <input 
                  v-model="formData.email" 
                  type="email" 
                  placeholder="请输入电子邮箱（选填）"
                  class="form-input"
                >
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label>
                  <i class="iconfont icon-gender"></i>
                  性别
                </label>
                <select 
                  v-model="formData.gender" 
                  class="form-input"
                >
                  <option value="0">未知</option>
                  <option value="1">男</option>
                  <option value="2">女</option>
                </select>
              </div>
              <div class="form-group">
                <label>
                  <i class="iconfont icon-user"></i>
                  所属管理员
                </label>
                <select 
                  v-model="formData.superior_id" 
                  class="form-input"
                  :disabled="isSubAccount"
                >
                  <option value="">无</option>
                  <option v-for="admin in adminList" :key="admin.id" :value="admin.id">
                    {{ admin.real_name || admin.username }}
                  </option>
                </select>
              </div>
              <div class="form-group">
                <label>
                  <i class="iconfont icon-money"></i>
                  底薪
                </label>
                <input 
                  v-model="formData.basic_salary" 
                  type="number" 
                  step="0.01" 
                  placeholder="请输入底薪（选填）"
                  class="form-input"
                >
              </div>
            </div>
            <div class="form-group">
              <label>
                <i class="iconfont icon-image"></i>
                头像
              </label>
              <input 
                type="file" 
                @change="handleAvatarUpload" 
                accept="image/*"
                class="form-input avatar-upload"
              >
              <div v-if="formData.avatar" class="avatar-preview">
                <img :src="formData.avatar" alt="头像预览">
                <button type="button" @click="removeAvatar" class="remove-avatar">删除</button>
              </div>
            </div>
          </form>
        </div>
        <div class="dialog-footer">
          <button class="btn cancel-btn" @click="closeDialog">
            <i class="iconfont icon-arrow-left"></i>
            <span class="btn-text">取消</span>
          </button>
          <button 
            v-if="isEditing"
            class="btn delete-btn" 
            @click="confirmDelete(formData)"
          >
            <i class="iconfont icon-delete"></i>
            <span class="btn-text">删除</span>
          </button>
          <button 
            class="btn submit-btn" 
            @click="submitForm"
          >
            <i class="iconfont icon-correct"></i>
            <span class="btn-text">保存</span>
          </button>
        </div>
      </div>
      
      <!-- 装饰元素 -->
      <div class="decoration star-1"><i class="iconfont icon-star"></i></div>
      <div class="decoration star-2"><i class="iconfont icon-star"></i></div>
      <div class="decoration star-3"><i class="iconfont icon-star"></i></div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { vToast } from "@/plugins/vToast"
import { vConfirm } from "@/plugins/vConfirm"
import { get, post } from "@/request"
import { useRouter } from 'vue-router'
import { useUserInfoStore } from '@/store/userInfoStore.js'

const router = useRouter()
const goBack = () => {
  router.go(-1)
}

const userInfoStore = useUserInfoStore()
const staffList = ref([])
const loading = ref(false)
const adminList = ref([])
const selectedAdmin = ref(null)
const adminSearchQuery = ref('')

// 获取当前用户信息
const currentUserInfo = computed(() => {
  return JSON.parse(localStorage.getItem('userInfo') || '{}')
})

// 判断当前用户是否为子账户
const isSubAccount = computed(() => {
  // 同时检查is_sub_account和is_sub字段，处理可能的不同类型值
  const subAccountStatus = currentUserInfo.value.is_sub_account
  const subStatus = currentUserInfo.value.is_sub
  
  // 如果is_sub为1、'1'或true，则是子账号
  if (subStatus === 1 || subStatus === '1' || subStatus === true) {
    return true
  }
  
  // 如果is_sub_account为1、'1'或true，则是子账号
  if (subAccountStatus === 1 || subAccountStatus === '1' || subAccountStatus === true) {
    return true
  }
  
  // 其他情况不是子账号
  return false
})

// 获取员工列表（根据token查询下属员工）
const fetchStaffList = async () => {
  loading.value = true
  try {
    // 调用获取子账号列表的接口，该接口会根据token识别当前登录用户
    const response = await get('/user/getSubAccountList')
    if (response.code === 200) {
      // 处理数据：将后端返回的role字段转换为前端需要的permission字段
      staffList.value = response.data.list.map(item => ({
        ...item,
        permission: item.role // 后端将permission重命名为role返回，这里需要转换回来
      }))
      
      // 分离管理员列表
      adminList.value = staffList.value.filter(staff => staff.permission === 'admin')
    } else {
      vToast({ message: response.msg || '获取下属员工列表失败' })
    }
  } catch (error) {
    vToast({ message: error.message || '获取下属员工列表异常' })
  } finally {
    loading.value = false
  }
}
const searchQuery = ref('')
const showDialog = ref(false)
const isEditing = ref(false)
const animate = ref(false)
const overlayActive = ref(false)
const formData = ref({
  id: null,
  username: '',
  real_name: '',
  position: '',
  permission: 'member',
  status: 1,
  password: '123456', // 默认密码
  // 新增字段
  sub_mobile: '',
  email: '',
  gender: 0, // 0=未知, 1=男, 2=女
  basic_salary: 0.00,
  avatar: null,
  superior_id: ''
})

// 职位列表
const positionList = ref([])

// 获取职位列表
const fetchPositions = async () => {
  try {
    const response = await get('/position/all')
    if (response.code === 200) {
      positionList.value = response.data
    }
  } catch (error) {
    console.error('获取职位列表失败:', error)
  }
}

// 格式化权限显示
const formatPermission = (permission) => {
  const map = {
    'superadmin': '系统超级管理员',
    'admin': '员工管理员',
    'member': '普通员工'
  }
  return map[permission] || permission
}

// 格式化性别显示
const formatGender = (gender) => {
  const map = {
    0: '未知',
    1: '男',
    2: '女'
  }
  return map[gender] || '未知'
}

// 过滤管理员列表
const filteredAdmins = computed(() => {
  return adminList.value.filter(admin => 
    admin.username.toLowerCase().includes(adminSearchQuery.value.toLowerCase()) ||
    admin.real_name.toLowerCase().includes(adminSearchQuery.value.toLowerCase())
  )
})

// 过滤员工列表
const filteredStaff = computed(() => {
  let result = staffList.value
  
  // 如果选择了管理员，只显示其下属
  if (selectedAdmin.value) {
    result = result.filter(staff => staff.superior_id === selectedAdmin.value.id)
  }
  
  // 应用搜索过滤
  return result.filter(staff => 
    staff.username.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
    staff.real_name.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})

// 选择管理员
const selectAdmin = (admin) => {
  selectedAdmin.value = selectedAdmin.value && selectedAdmin.value.id === admin.id ? null : admin
}

// 处理返回
const handleBack = () => {
  window.history.back()
}

// 显示添加对话框
const showAddDialog = () => {
  isEditing.value = false
  // 从localStorage获取当前用户信息
  const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
  formData.value = {
    id: null,
    username: '',
    real_name: '',
    position: '',
    permission: 'member',
    status: 1,
    password: '123456', // 默认密码
    // 新增字段
    sub_mobile: '',
    email: '',
    gender: 0,
    basic_salary: 0.00,
    avatar: null,
    superior_id: userInfo.id || '' // 设置默认值为当前用户ID
  }
  // 如果是子账户，强制设置权限为普通员工且不可修改
  if (isSubAccount.value) {
    formData.value.permission = 'member'
  }
  // 获取职位列表
  fetchPositions()
  showDialog.value = true
  animate.value = true
  setTimeout(() => {
    overlayActive.value = true
  }, 50)
}

// 编辑员工
const editStaff = (staff) => {
  isEditing.value = true
  formData.value = {
    ...staff,
    // 确保新增字段有默认值
    sub_mobile: staff.sub_mobile || '', // 从后端返回的sub_mobile字段获取手机号
    email: staff.email || '',
    gender: staff.gender || 0,
    basic_salary: staff.basic_salary || 0.00,
    avatar: staff.avatar || null,
    superior_id: staff.superior_id || ''
  }
  // 如果是子账户，强制设置权限为普通员工且不可修改
  if (isSubAccount.value) {
    formData.value.permission = 'member'
  }
  // 获取职位列表
  fetchPositions()
  showDialog.value = true
  animate.value = true
  setTimeout(() => {
    overlayActive.value = true
  }, 50)
}

// 头像上传处理
const handleAvatarUpload = async (event) => {
  const file = event.target.files[0]
  if (!file) return
  
  // 这里可以实现头像上传逻辑
  // 由于没有具体的上传接口，暂时使用base64模拟
  const reader = new FileReader()
  reader.onload = (e) => {
    formData.value.avatar = e.target.result
  }
  reader.readAsDataURL(file)
}

// 移除头像
const removeAvatar = () => {
  formData.value.avatar = null
}

// 提交表单
const submitForm = async () => {
  try {
    if (isEditing.value) {
      // 更新员工
      const response = await post('/user/update', {
        id: formData.value.id,
        real_name: formData.value.real_name,
        position: formData.value.position,
        permission: formData.value.permission,
        status: 1, // 固定为启用状态
        // 新增字段
        email: formData.value.email,
        gender: formData.value.gender,
        basic_salary: formData.value.basic_salary,
        sub_mobile: formData.value.sub_mobile,
        avatar: formData.value.avatar,
        superior_id: formData.value.superior_id || null
      })
      
      if (response.code === 200) {
        vToast({ message: '员工信息已更新' })
        fetchStaffList()
      } else {
        vToast({ message: response.msg || '更新失败' })
      }
    } else {
      // 添加子账号
      const response = await post('/user/createSubAccount', {
        username: formData.value.username,
        password: formData.value.password,
        real_name: formData.value.real_name,
        position: formData.value.position,
        role: formData.value.permission === 'admin' ? 1 : 0,
        status: formData.value.status,
        // 新增字段
        email: formData.value.email,
        gender: formData.value.gender,
        basic_salary: formData.value.basic_salary,
        mobile: formData.value.sub_mobile,
        avatar: formData.value.avatar,
        superior_id: formData.value.superior_id || null // 添加superior_id字段
      })
      
      if (response.code === 200) {
        vToast({ message: '子账号添加成功' })
        fetchStaffList()
      } else {
        vToast({ message: response.msg || '添加失败' })
      }
    }
    closeDialog()
  } catch (error) {
    vToast({ message: error.message || '操作失败' })
  }
}

// 关闭对话框
const closeDialog = () => {
  animate.value = false
  overlayActive.value = false
  setTimeout(() => {
    showDialog.value = false
  }, 350)
}

// 确认删除
const confirmDelete = (staff) => {
  vConfirm({
    message: `确定删除员工 ${staff.real_name} 吗?`,
  }).then(async () => {
    try {
      const response = await post('/user/delete', { id: staff.id })
      if (response.code === 200) {
        vToast({ message: '员工删除成功' })
        fetchStaffList()
      } else {
        vToast({ message: response.msg || '删除失败' })
      }
    } catch (error) {
      vToast({ message: error.message || '删除异常' })
    }
  }).catch(() => {})
}

onMounted(() => {
  fetchStaffList()
})
</script>

<style scoped lang="less">
.staff-container {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.tables-wrapper {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.left-table, .right-table {
  flex: 1;
  background: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.left-table h3, .right-table h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  color: #303133;
}

.left-table .table-container {
  max-height: 600px;
  overflow-y: auto;
}

.left-table .data-table tr {
  cursor: pointer;
  transition: all 0.2s;
}

.left-table .data-table tr:hover {
  background-color: #f5f7fa;
}

.left-table .data-table tr.selected {
  background-color: #e6f7ff;
  color: #1890ff;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

  .header-left {
    display: flex;
    align-items: center;

    .title {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #303133;
    }
  }
}

.back-button {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    border-color: var(--bs-theme-color);
    color: var(--bs-theme-color);
  }

  .iconfont {
    font-size: 14px;
  }
}

.search-bar {
  display: flex;
  margin-bottom: 20px;
  gap: 10px;
}

.search-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.add-btn {
  padding: 8px 16px;
  background: var(--bs-theme-color);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th, .data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.data-table th {
  background: #f5f5f5;
  font-weight: 500;
}

.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status.active {
  background: #e6f7e6;
  color: #52c41a;
}

.status.inactive {
  background: #fff2f0;
  color: #ff4d4f;
}

.edit-btn, .delete-btn {
  padding: 4px 8px;
  margin-right: 5px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s;
}

.edit-btn {
  background: #e6f7ff;
  color: #1890ff;
  
  &:disabled {
    background: #f5f5f5;
    color: #bfbfbf;
    cursor: not-allowed;
  }
}

.delete-btn {
  background: #fff2f0;
  color: #ff4d4f;
  
  &:disabled {
    background: #f5f5f5;
    color: #bfbfbf;
    cursor: not-allowed;
  }
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow: hidden;
  font-family: var(--font-family-base);
  transition: background-color 0.3s ease-out;

  &.active {
    background-color: rgba(0, 0, 0, 0.45);
  }

  .cloud {
    position: absolute;
    font-size: 80px;
    opacity: 0;
    animation: float 8s infinite ease-in-out;
    z-index: -1;
    transition: opacity 0.5s ease;
    color: white;

    &.cloud-1 { top: 20%; left: 10%; animation-delay: 0s; }
    &.cloud-2 { top: 60%; right: 15%; animation-delay: 1s; }
    &.cloud-3 { bottom: 10%; left: 25%; animation-delay: 2s; }
  }

  &.active .cloud {
    opacity: 0.1;
  }

  .dialog-content {
    width: 500px;
    max-width: 90vw;
    background: var(--bs-bg-color);
    border-radius: var(--border-radius-base);
    overflow: hidden;
    transform: translateY(40px) scale(0.95);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

    &.bounce-in {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    .dialog-header {
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--bs-theme-color);
      color: white;

      .dialog-title h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
      }

      .title-underline {
        height: 2px;
        width: 40px;
        background: white;
        border-radius: 1px;
        margin-top: 6px;
      }

      .close-btn {
        width: 32px;
        height: 32px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        color: white;
        font-size: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;

        &:hover {
          background: rgba(255, 255, 255, 0.3);
        }
      }
    }

    .dialog-body {
      padding: 15px;

      .form-group {
        margin-bottom: 12px;

        label {
          display: flex;
          align-items: center;
          font-size: 13px;
          color: var(--bs-nav-link-color);
          margin-bottom: 6px;

          .iconfont {
            margin-right: 6px;
            font-size: 14px;
          }
        }

        .form-input, select {
          width: 100%;
          padding: 10px;
          border: 1px solid var(--bs-border-color);
          border-radius: 2px;
          font-size: 13px;
          transition: all 0.3s;
          background: white;

          &:focus {
            outline: none;
            border-color: var(--bs-theme-color);
            box-shadow: 0 0 0 2px rgba(0, 145, 190, 0.1);
          }
        }

        select {
          appearance: none;
          background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
          background-repeat: no-repeat;
          background-position: right 10px center;
          background-size: 12px;
        }
      }

      .form-row {
        display: flex;
        gap: 12px;

        .form-group {
          flex: 1;
        }
      }
    }

    .dialog-footer {
      padding: 12px 15px;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      background: var(--bs-bg-color);
      border-top: 1px solid var(--bs-border-color);

      .btn {
        padding: 8px 16px;
        border-radius: 2px;
        border: 1px solid var(--bs-border-color);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s;

        &.cancel-btn {
          background: white;
          color: var(--bs-text-color);

          &:hover {
            background: var(--bs-gray-color);
            transform: translateY(-1px);
          }
        }

        &.delete-btn {
          background: var(--bs-warn-color);
          color: white;
          border-color: var(--bs-dark-color);

          &:hover {
            background: var(--bs-dark-color);
            transform: translateY(-1px);
          }
        }

        &.submit-btn {
          background: var(--bs-theme-color);
          color: white;
          border-color: var(--bs-dark-color);

          &:hover {
            background: var(--bs-dark-color);
            transform: translateY(-1px);
          }
        }
      }
    }
  }

  .decoration {
    position: absolute;
    font-size: 18px;
    animation: float 6s infinite ease-in-out;
    z-index: -1;
    color: var(--bs-theme-color);
    opacity: 0;

    &.star-1 { top: 15%; right: 15%; animation-delay: 0.5s; }
    &.star-2 { top: 70%; left: 15%; animation-delay: 1s; }
    &.star-3 { bottom: 15%; right: 20%; animation-delay: 1.5s; }
  }

  &.active .decoration {
    opacity: 0.1;
  }
}

@keyframes float {
  0%, 100% { 
    transform: translateY(0) translateX(0) rotate(0deg); 
  }
  25% { 
    transform: translateY(-15px) translateX(5px) rotate(2deg); 
  }
  50% { 
    transform: translateY(0) translateX(10px) rotate(0deg); 
  }
  75% { 
    transform: translateY(-10px) translateX(-5px) rotate(-2deg); 
  }
}

@media (max-width: 600px) {
  .dialog-content {
    width: 90vw;

    .dialog-header {
      padding: 12px;

      .dialog-title h2 {
        font-size: 16px;
      }
    }

    .dialog-body {
      .form-row {
        flex-direction: column;
        gap: 12px;
      }
    }

    .dialog-footer .btn {
      padding: 6px 12px;
      font-size: 12px;
    }
  }
}

/* 头像上传样式 */
.avatar-preview {
  margin-top: 10px;
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 50%;
}

/* 表格样式 */
.table-container {
  overflow-x: auto;
  margin-top: 16px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.data-table th,
.data-table td {
  padding: 12px;
  border-bottom: 1px solid var(--bs-border-color);
  white-space: nowrap;
}

.data-table th {
  background-color: var(--bs-bg-color);
  font-weight: 600;
  font-size: 13px;
  color: var(--bs-text-color);
  position: sticky;
  top: 0;
  z-index: 10;
}

.data-table tbody tr:hover {
  background-color: rgba(0,0,0,0.02);
}

.data-table td {
  font-size: 13px;
  color: var(--bs-text-color);
}

/* 设置列宽 */
.data-table th:nth-child(1),
.data-table td:nth-child(1) {
  width: 60px;
}

.data-table th:nth-child(2),
.data-table td:nth-child(2) {
  width: 120px;
}

.data-table th:nth-child(3),
.data-table td:nth-child(3) {
  width: 100px;
}

.data-table th:nth-child(4),
.data-table td:nth-child(4) {
  width: 100px;
}

.data-table th:nth-child(5),
.data-table td:nth-child(5) {
  width: 100px;
}

.data-table th:nth-child(6),
.data-table td:nth-child(6) {
  width: 120px;
}

.data-table th:nth-child(7),
.data-table td:nth-child(7) {
  width: 180px;
}

.data-table th:nth-child(8),
.data-table td:nth-child(8) {
  width: 80px;
}

.data-table th:nth-child(9),
.data-table td:nth-child(9) {
  width: 100px;
}

.data-table th:nth-child(10),
.data-table td:nth-child(10) {
  width: 80px;
}

.data-table th:nth-child(11),
.data-table td:nth-child(11) {
  width: 140px;
  text-align: center;
}

.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.remove-avatar {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
}

/* 权限标签样式 */
.permission-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: white;
  display: inline-block;
  min-width: 60px;
  text-align: center;
}

/* 超级管理员标签样式 */
.permission-superadmin {
  background-color: #ff6b6b;
}

/* 员工管理员标签样式 */
.permission-admin {
  background-color: #4dabf7;
}

/* 普通员工标签样式 */
.permission-member {
  background-color: #51cf66;
}

/* 表格包装器样式 */
.tables-wrapper {
  display: flex !important;
  gap: 20px !important;
  margin-top: 20px !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
}

/* 左侧管理员表格样式 - 强制固定宽度510px */
.left-table,
.tables-wrapper > div:nth-child(1) {
  width: 510px !important;
  min-width: 510px !important;
  max-width: 510px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  flex-basis: 510px !important;
  border-right: 1px solid var(--bs-border-color);
  padding-right: 20px;
  overflow: hidden;
}

/* 右侧员工表格样式 - 自适应剩余空间 */
.right-table,
.tables-wrapper > div:nth-child(2) {
  flex: 1 1 100% !important;
  min-width: 0 !important;
  width: calc(100% - 530px) !important;
}

/* 状态标签样式 */
.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
  min-width: 60px;
  text-align: center;
}

/* 启用状态样式 */
.status.active {
  background-color: #51cf66;
  color: white;
}

/* 禁用状态样式 */
.status.inactive {
  background-color: #adb5bd;
  color: white;
}
</style>